<template>
    <v-divider class="border-opacity-100" :thickness="4" color="info" style="margin-top: 10px;"></v-divider>
    <v-card color="#E8EAF6" style="padding: 0px;">
        <div
            class="container"
            style="margin-top: 5px"
        >
            <h4 class="title">shadow:</h4>
            <div style="justify-content: flex-end">
                <ColorPicker
                    :attrAttr="attr"
                    :selectedColor="attr.style.boxShadow.split(' ')[4]"
                    colorName="boxShadow"
                ></ColorPicker>
            </div>
        </div>
        <div
            class="container"
            style="margin-bottom: 5px"
        >
            <input
                v-for="(value, index) in valueArray"
                :key="index"
                class="input"
                style="text-align: center"
                :style="{
                    marginLeft: index === 0 ? '35px' : '2px',
                    marginRight: index === 3 ? '35px' : '2px'
                }"
                :value="value.replace('px', '')"
                @change="
                    (e) => {
                        valueArray[index] = e.target.value + 'px'
                        attr.style['boxShadow'] = valueArray.join(' ') + ' ' + attr.style['boxShadow'].split(' ')[4] + ' !important'
                        designStore.rerender()
                    }
                "
            />
        </div>
    </v-card>
</template>

<script>
import { useDesignStore } from '../../../../../../stores/design'
import ColorPicker from './ColorPicker.vue'
export default {
    name: 'ShadowArea',
    components: {
        ColorPicker
    },
    props: {
        attrAttr: Object
    },
    data() {
        return {
            designStore: useDesignStore(),
            attr: this.attrAttr,
            valueArray: []
        };
    },
    mounted() {
        this.valueArray = this.attr.style['boxShadow'].split(' ')
        this.valueArray = this.valueArray.slice(0, 4)
    }
}
</script>
